<template>
	<view class="product"> 
		<Back></Back>
		<view class="product_img">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular>
				<swiper-item  @tap="toShop"  v-for="(item,index) in productPicture" :key="index">
					<view class="swiper-item">
						<image class="img_item" :src="`http://192.168.0.103:3000/`+item.product_picture" mode="widthFix"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="product_content">
			<text class="product_name">商品名称：{{productDetails.product_name}}</text>
			<text class="product_title">{{productDetails.product_title}}</text>
			<view class="price">
				<view class="set_price">原价：<text class="product_price">{{productDetails.product_price}}</text>元</view>
				<view class="set_price selling_price">出售价：<text class="product_selling_price">{{productDetails.product_selling_price}}</text>元</view>
				<view class="coller_show" @tap="toCollect()">
					<image v-if="!show" class="coller" src="../../static/icons/colloer.png"></image>
					<image v-if="show" class="coller" src="../../static/icons/colloer_active.png"></image>
				</view>
			</view>
		</view>
		<view class="intro_info">《- ---详情--- -》</view>
		<view class="good_info">
			<view class="good_item" v-for="(item,index) in product_intro " :key="index">
				<text>{{item}}</text>
			</view>
		</view>
		<view class="footer">
			<view class="product_buy">售价：<text class="product_selling_price">{{productDetails.product_selling_price}}</text>元</view>
			<button class="btn goodcar" @tap="addShoppingCart">加入购物车</button>
			<button class="btn gobug">立即购买</button>
		</view>
	</view>
</template>

<script scoped>
	import { mapActions } from "vuex";
	import Back from '@/components/back.vue'
	export default{
		components:{Back},
		data() {
			return {
				show:false,
				productID: "", // 商品id
				productDetails: "", // 商品详细信息
				productPicture: "" ,// 商品图片
				product_intro:[],
				
			}
		},
		onLoad(opt) {
			this.productID=opt.product_id;
			this.getDetailsPicture();
			this.getColloer();
		},
		onShow() {
		},
		  watch: {
		    // 监听商品id的变化，请求后端获取商品数据
		    productID: function(val) {
		      this.getDetails(val);
		      this.getDetailsPicture(val);
		    }
		  },
		methods:{
			...mapActions(["unshiftShoppingCart", "addShoppingCartNum", "setShowLogin"]),
			
			    getDetails(val) {
			      this.$request
			        .post("/product/getDetails", {
			          productID: val
			        })
			        .then(res => {
						// console.log(res.data.Product[0])
			          this.productDetails = res.data.Product[0];
					  const content =res.data.Product[0].product_intro;
					  const contxt = content.indexOf("|")
					 
					  if(content.indexOf("|")>0) {
						  this.product_intro=content.split("|")
					  }else{
						  this.product_intro=content.split("/")
					  }
					  
				
					   // this.product_intro=res.data.Product[0].product_intro.split("|")
				
					  // console.log(this.product_intro)
			        })
			        .catch(err => {
			          return Promise.reject(err);
			        });
			    },
			    // 获取商品图片
			    getDetailsPicture(val) {
			      this.$request
			        .post("/product/getDetailsPicture", {
			          productID: val
			        })
			        .then(res => {
						// console.log(res.data.ProductPicture)
			          this.productPicture = res.data.ProductPicture;
			        })
			        .catch(err => {
			          return Promise.reject(err);
			        });
			    },
				getColloer(){
					 this.$request
					      .post("/user/collect/getCollect", {
					        user_id:this.$store.getters.getUser.user_id,
					      })
					      .then(res => {
							    console.log(res)
					        if (res.data.code === "001") {
					          const collectList = res.data.collectList;
							 const list= collectList.map(item=>{
								 if(item.product_id!=this.productID){
									 return false}
									 else{
										 this.show=true
									  return true
								 }
							  })
							  console.log(this.show)
					        }
					      })
					      .catch(err => {
					        return Promise.reject(err);
					      });
				},
				toCollect(id){
					      if (this.$store.getters.getUser=='') {
					        uni.navigateTo({
					        	url:"/subpages/login_register/index"
					        })
					        return;
					      }
					      this.$request
					        .post("/user/collect/addCollect", {
					          user_id: this.$store.getters.getUser.user_id,
					          product_id: this.productID
					        })
					        .then(res => {
					          if (res.data.code == "001") {
					            // 添加收藏成功
					           uni.showToast({
					           	title:res.data.msg,
								duration:2000
					           });
								this.getColloer();
					          } else {
					            // 添加收藏失败
					           uni.showToast({
					           	title:res.data.msg,
					           	duration:1000 });
								this.getColloer();
					          }
					        }
							
							)
					        .catch(err => {
					          return Promise.reject(err);
					        });
				},
				 addShoppingCart() {
				      // 判断是否登录,没有登录则显示登录组件
				      if (!this.$store.getters.getUser) {
				        // this.$store.dispatch("setShowLogin", true);
				        this.setShowLogin(true);
				        return;
				      }
				      this.$request
				        .post("/user/shoppingCart/addShoppingCart", {
				          user_id: this.$store.getters.getUser.user_id,
				          product_id: this.productID
				        })
				        .then(res => {
				          // console.log(res)
				          switch (res.data.code) {
				            case "001":
				              // 新加入购物车成功
				              this.unshiftShoppingCart(res.data.shoppingCartData[0]);
				             uni.showToast({
				             	title:res.data.msg,
				             	duration:1000 });
				              break;
				            case "002":
				              // 该商品已经在购物车，数量+1
				              this.addShoppingCartNum(this.productID);
				             uni.showToast({
				             	title:res.data.msg,
				             	duration:1000 });;
				              break;
				            case "003":
				              // 商品数量达到限购数量
				              this.dis = true;
				              uni.showToast({
				              	title:res.data.msg,
				              	duration:1000 });
				              break;
				            default:
				              uni.showToast({
				              	title:res.data.msg,
				              	duration:1000 });
				          }
				        })
				        .catch(err => {
				          return Promise.reject(err);
				        });
				    },
		}
		
	}
</script>

<style scoped >
	.swiper{
		margin-top: -40rpx;
		width: 100%;
		height: 600rpx;
	}
	.img_item{
		width: 100%;
		height: 100%;
	}
	.product_content{
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}
	.set_price{
		position: absolute;
		font-size: 38rpx;
		height: 80rpx;
		line-height: 80rpx;
		left: 10rpx;
	}
	.selling_price{
		top: 70rpx;
	}
	.price{
		position: relative;
		height: 160rpx;
		display: flex;
		clear: both;
	}
	.coller_show{
		position: absolute;
		width: 100rpx;
		height: 100rpx;
		top: 30rpx;
		right: 10rpx;
	}
	.coller{
		width: 100rpx;
		height: 100rpx;
	}
	.product_name{
		font-size: 40rpx;
		font-weight: bold;
	}
	.intro_info{
		font-size: 38rpx;
		text-align: center;
	}
	.good_info{
		width: 100%;
		display: inline-block;
		margin-bottom: 140rpx;
	}
	.good_item{
		width: 50%;
		height: 80rpx;
		line-height: 80rpx;
		float: left;
		font-size: 24rpx;
		text-align: center;
		box-shadow: 20rpx 20rpx 10rpx #e8dfc4;
	}
	.good_item:hover{
		transform: scale(1.1);
	}
	.product_title{
		color: #ffc20e;
	}
	.product_name,.product_title{
		text-align: center;
	}
	.footer{
		position: fixed;
		display: flex;
		width: 100%;
		height: 120rpx;
		bottom: 0%;
		background-color: aliceblue;
		padding-bottom: -120rpx;
	}
	.product_price{
		text-decoration: line-through;
	}
	.btn{
		font-size: 38rpx;
		width: 220rpx;
		height: 100rpx;
		margin-top: 12rpx;
	}
	.goodcar{
		background-color: #85c1fe;
	}
	.gobug{
		float: left;
		background-color: #8dc63f;
	}
	.product_buy{
		line-height: 120rpx;
		font-size: 36rpx;
		margin-left: 8rpx;
	}
	.product_selling_price{
		color: #ffc20e;
	}
</style>